---
title: ShapeRenderer 形状渲染器
icon: Shapes
relatedFile: app/src/core/render/canvas2d/basicRenderer/shapeRenderer.tsx
---

`ShapeRenderer` 服务是一个基础图形渲染器，专门用于在画布上绘制各种图形。它基于 `Project` 实例，通过访问 `project.canvas.ctx` 来操作 HTML Canvas 2D 渲染上下文，所有绘制操作都基于 View 坐标系。

## API

### 圆形渲染

#### `renderCircle(centerLocation: Vector, radius: number, color: Color, strokeColor: Color, strokeWidth: number): void`

用于绘制一个实心圆，并可选择性地添加边框。

#### `renderArc(centerLocation: Vector, radius: number, angle1: number, angle2: number, strokeColor: Color, strokeWidth: number): void`

用于绘制一个圆弧，但不进行填充。圆弧从 `angle1` 开始，到 `angle2` 结束，逆时针方向绘制。

#### `renderCircleTransition(viewLocation: Vector, radius: number, centerColor: Color): void`

用于绘制一个中心过渡的圆形，常用于实现特效。它创建一个径向渐变，从圆心开始，颜色逐渐过渡到边缘的透明色。

### 矩形渲染

#### `renderRectFromCenter(centerLocation: Vector, width: number, height: number, color: Color, strokeColor: Color, strokeWidth: number, radius: number = 0): void`

用于绘制一个矩形，其坐标点是矩形的中心点。支持圆角矩形。

#### `renderRect(rect: Rectangle, color: Color, strokeColor: Color, strokeWidth: number, radius: number = 0): void`

用于绘制一个矩形，基于 `Rectangle` 对象定义的位置和大小。支持圆角矩形。

#### `renderRectWithShadow(rect: Rectangle, fillColor: Color, strokeColor: Color, strokeWidth: number, shadowColor: Color, shadowBlur: number, shadowOffsetX: number = 0, shadowOffsetY: number = 0, radius: number = 0): void`

用于绘制一个带有阴影的矩形。在绘制完成后，会自动清除阴影设置，避免影响后续绘制。

### 多边形渲染

#### `renderPolygonAndFill(points: Vector[], fillColor: Color, strokeColor: Color, strokeWidth: number, lineJoin: "round" | "bevel" = "round"): void`

用于绘制并填充一个多边形。
- `points` 参数是多边形的顶点数组，无需考虑首尾点闭合。
- 支持设置线段连接处的样式为圆角 (`round`) 或斜角 (`bevel`)。

### 特殊形状渲染

#### `renderCameraShapeBorder(rect: Rectangle, borderColor: Color, borderWidth: number): void`

用于绘制一个类似摄像机形状的边框。
- 表面上是一个矩形框，但只有四个角有边框，每条边的中间部分是透明的。
- 四个角线段的长度是各边长的 25%。
